<template>
  <div class="image-background">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="input-card">
          <template #header>
            <div class="card-header">
              <span>原始图片</span>
              <el-button type="primary" @click="removeBackground" :disabled="!inputImage">
                去除背景
              </el-button>
            </div>
          </template>
          <div
            class="upload-area"
            @drop.prevent="handleDrop"
            @dragover.prevent
            @click="triggerUpload"
          >
            <input
              type="file"
              ref="fileInput"
              style="display: none"
              accept="image/*"
              @change="handleFileChange"
            />
            <div v-if="!inputImage" class="upload-placeholder">
              <el-icon><Upload /></el-icon>
              <div>点击或拖拽图片到此处</div>
            </div>
            <img v-else :src="inputImage" class="preview-image" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="output-card">
          <template #header>
            <div class="card-header">
              <span>处理结果</span>
              <el-button type="primary" @click="downloadImage" :disabled="!outputImage">
                下载图片
              </el-button>
            </div>
          </template>
          <div class="result-area">
            <img v-if="outputImage" :src="outputImage" class="preview-image" />
            <div v-else class="placeholder">
              处理后的图片将显示在这里
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Upload } from '@element-plus/icons-vue'

const fileInput = ref(null)
const inputImage = ref('')
const outputImage = ref('')

const triggerUpload = () => {
  fileInput.value.click()
}

const handleFileChange = (event) => {
  const file = event.target.files[0]
  if (file) {
    processImage(file)
  }
}

const handleDrop = (event) => {
  const file = event.dataTransfer.files[0]
  if (file && file.type.startsWith('image/')) {
    processImage(file)
  } else {
    ElMessage.error('请上传图片文件')
  }
}

const processImage = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    inputImage.value = e.target.result
  }
  reader.readAsDataURL(file)
}

const removeBackground = async () => {
  // 这里应该调用后端 API 进行背景去除
  // 目前只是模拟处理结果
  ElMessage.success('处理成功')
  outputImage.value = inputImage.value
}

const downloadImage = () => {
  const link = document.createElement('a')
  link.download = 'no-background.png'
  link.href = outputImage.value
  link.click()
}
</script>

<style scoped>
.image-background {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.upload-area {
  height: 400px;
  border: 2px dashed var(--el-border-color);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border-color 0.3s;
}

.upload-area:hover {
  border-color: var(--el-color-primary);
}

.upload-placeholder {
  text-align: center;
  color: var(--el-text-color-secondary);
}

.upload-placeholder .el-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.preview-image {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}

.result-area {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.placeholder {
  color: var(--el-text-color-secondary);
}
</style> 